<template>
	<view class="orderList">
		<view class="top" :style="{top:offsetTop + 'px'}">
			<view class="top-item" :class="{'select': type == -1}" @click="tabClick(-1)">全部</view>
			<view class="top-item" :class="{'select': type == 0}"  @click="tabClick(0)">待付款</view>
			<view class="top-item" :class="{'select': type == 1}"  @click="tabClick(1)">待发货</view>
			<view class="top-item" :class="{'select': type == 2}"  @click="tabClick(2)">待收货</view>
			<view class="top-item" :class="{'select': type == 8}"  @click="tabClick(8)">待评价</view>
		</view>
		<view class="item" v-for="(item, i) in orderList" :key="i">
			<view class="title">
				<text class="title-l">订单状态</text>
				<text class="title-r" v-if="item.orderStatus == 0">待支付</text>
				<text class="title-r" v-if="item.orderStatus == 1">待发货</text>
				<text class="title-r" v-if="item.orderStatus == 2">已发货</text>
				<text class="title-r" v-if="item.orderStatus == 3">已完成</text>
				<text class="title-r" v-if="item.orderStatus == 8">待评价</text>
			</view>
			<view class="cont" @click="toOrderDatail(item.orderId)" v-for="(item1, i1) in item.orderDetailList" :key="i1">
				<view class="cont-l">
					<image :src="item1.pictureUrl" mode="" class="img"></image>
				</view>
				<view class="cont-c">
					<view class="name">{{item1.commodityName}}</view>
					<view class="spec">{{item1.optionName}}</view>
					<view class="price">
						<text class="price-l">¥{{item1.marketingPrice}}</text>
						<text class="price-r">X{{item1.buyAmount}}</text>
					</view>
				</view>
			</view>
			<view class="total">
				<text class="total-l">共{{item.orderDetailList.length}}件商品</text>
				<text class="total-c">合计：</text>
				<text class="total-r">¥{{item.payAmount}}</text>
			</view>
			<!-- 待付款 -->
			<view class="bottom" v-if="item.orderStatus == 0">
				<view class="bottom-l">
					<view class="time">09:59</view>
					<view>支付剩余</view>
				</view>
				<view class="bottom-c">
					<button class="btn4">取消订单</button>
				</view>
				<view class="bottom-r">
					<button class="btn1">立即付款</button>
				</view>
			</view>
			<!-- 已发货 -->
			<view class="bottom" v-if="item.orderStatus == 2">
				<view class="bottom-r1">
					<button class="btn2">查看订单</button>
				</view>
				<view class="bottom-r">
					<button class="btn3" type="default">确认收货</button>
				</view>
			</view>
		</view>
		<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
	</view>
</template>

<script>
	import Api from '../../../util/api.js'
	import uniLoadMore from '../../../components/uni-load-more.vue'
	export default {
		components:{
			uniLoadMore
		},
		data() {
			let offsetTop = 0;
			//#ifdef H5
			offsetTop = 44;
			//#endif
			return {
				type : '-1',
				offsetTop: offsetTop,
				orderList:[],
				pageNum:1,
				pageSize: 10,
				loadingType: 0, //上拉加载类型 0可以加载 1加载中 2没有更多了
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			};
		},
		onLoad(option) {
			 this.type = option.orderType;
			 this.getOrderList();
		},
		methods:{
			getOrderList(type){
				Api.fetchPost('/fsbus/M2001',{
					type: this.type,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res=>{
					if(res.errorNo == 0){
						if(type == 'add'){
							this.orderList = this.orderList.concat(res.results?res.results.data.list:[]);
						}else {
							this.orderList = res.results?res.results.data.list:[];
						}
						if(type = 'refresh'){
							uni.stopPullDownRefresh();
						}
						if(this.pageNum ==  res.results.data.pages){
							this.loadingType = 2;
						}else {
							this.loadingType = 0;
						}
					}
				}).catch(err=>{})
			},
			toOrderDatail(orderId){
				uni.navigateTo({
						url: '/pages/order/orderDetail/orderDetail?orderId='+orderId
				});
			},
			tabClick(i){
				this.pageNum = 1;
				this.type = i;
				this.getOrderList();
			}
		},
		/* 下拉刷新 */
		onPullDownRefresh() {
			this.pageNum = 1;
			this.getOrderList('refresh');	
		},
		onReachBottom() {
			if(this.loadingType !=2){
				this.loadingType = 1;
				this.pageNum ++;
				this.getOrderList('add');
			}
		},
	}
</script>

<style>
.orderList {
	width: 100%;
	min-height: 100%;
	position: absolute;
	background-color: #f3f3f3;
	font-size: 26upx;
	padding-top: 100upx;
}
.top {
	width: 100%;
	height: 100upx;
	background-color: #fff;
	display: flex;
	position: fixed;
	top: 0upx;
	overflow: auto;
	z-index: 99;
}
.top .top-item {
	width: 150upx;
	text-align: center;
	line-height: 100upx;
	flex: 0 0 auto;
}
.top .top-item.select {
	color: #F52A4C;
}
.item {
	width:100%;
	min-height: 200upx;
	background-color: #fff;
	margin-top: 20upx;
	padding: 0 30upx;
}
.item .title {
	line-height: 80upx;
	height: 80upx;
}
.item .title .title-l {
	float: left;
}
.item .title .title-r {
	float: right;
	color: #F52A4C;
}
.item .cont {
	display: flex;
}
.item .cont .cont-l {
	width: 150upx;
	height: 150upx;
	margin-right: 40upx;
}
.item .cont .cont-l .img {
	width: 100%;
	height: 100%;
	background-color: #A2A2A2;
}
.item .cont .cont-c {
	flex: 1;
}
.item .cont .name {
	font-size: 24upx;
	height: 50upx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.item .cont .spec {
	color: #666666;
	font-size: 22upx;
	margin-bottom: 10upx;
}
.item .cont .price-l {
	float: left;
	color: #2E2E2E;
}
.item .cont .price-r {
	float: right;
	font-size: 22upx;
	color: #999999;
}
.item .total {
	height: 80upx;
	line-height: 80upx;
	padding-left: 190upx;
}
.item .total .total-l {
	width: 180upx;
	display: inline-block;
	float: left;
}
.item .total .total-c {
	float: left;
	margin-left: 40upx;
}

.item .total .total-r{
	float: right;
	color: #F52A4C;
}
.item .bottom {
	display: flex;
	padding-bottom: 20upx;
}
.item .bottom .bottom-l {
	width: 200upx;
}
.item .bottom .bottom-l .time {
	color: #F52A4C;
}
.item .bottom .bottom-c {
	width: 160upx;
	margin-right: 20upx;
	padding-top: 17upx;
}
.item .bottom .bottom-r1 {
	flex: 1;
	margin-right: 40upx;
	padding-top: 17upx;
}
.item .bottom .bottom-r {
	flex: 1;
	padding-top: 17upx;
}
.item .bottom .btn1 {
	width: 100%;
	height: 64upx;
	line-height: 64upx;
	background-color: #F52A4C;
	border-radius: 0;
	color: #fff;
	font-size: 26upx;
	border-radius: 6upx;
}
.item .bottom .btn2 {
	width: 100%;
	height: 64upx;
	line-height: 64upx;
	background-color: #fff;
  border:1px solid #ccc;
	color: #333;
	font-size: 26upx;
	border-radius: 6upx;
}
.item .bottom .btn3 {
	width: 100%;
	height: 64upx;
	line-height: 64upx;
	background-color: #fff;
  border:1px solid #F52A4C;
	color: #F52A4C;
	font-size: 26upx;
	border-radius: 6upx;
}
.item .bottom .btn4 {
	width: 160upx;
	height: 64upx;
	background-color: #A2A2A2;
	color: #fff;
	font-size: 26upx;
	line-height: 64upx;
	border-radius: 6upx;
	border: 0;
}
uni-button:after {
	border: none;
}
</style>
